import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:video_setting/pages/utils/numerical_extension.dart';
import 'package:video_setting/pages/video_setting/video_setting_controller.dart';

class ViewSettingPage extends GetView<ViewSettingController> {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<ViewSettingController>(builder: (_) {
      return Scaffold(
        body: Container(
          alignment: Alignment.center,
          color: Colors.white,
          child: Column(
            children: [
              SizedBox(height: 30.px),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('connect state:   '),
                  Text(
                    controller.connectStateStr,
                    style: TextStyle(color: Colors.red),
                  ),
                ],
              ),
              SizedBox(height: 40.px),
              GestureDetector(
                onTap: () {},
                child: Container(
                  color: Colors.green,
                  alignment: Alignment.center,
                  width: 300.px,
                  height: 42.px,
                  child: Text('图片获取频率设置'),
                ),
              ),
              SizedBox(height: 10.px),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  GestureDetector(
                    onTap: () {
                      controller.pictureTimeSetting(1);
                    },
                    child: Container(
                      decoration: BoxDecoration(
                        color: (controller.pictureSetting == 1) ? Colors.green : Colors.white,
                        border: Border.all(color: Colors.black, width: 0.5.px),
                        borderRadius: BorderRadius.all(Radius.circular(5)),
                      ),
                      alignment: Alignment.center,
                      width: 100.px,
                      height: 42.px,
                      child: Text('一分钟'),
                    ),
                  ),
                  SizedBox(width: 30.px),
                  GestureDetector(
                    onTap: () {
                      controller.pictureTimeSetting(2);
                    },
                    child: Container(
                      decoration: BoxDecoration(
                        color: (controller.pictureSetting == 2) ? Colors.green : Colors.white,
                        border: Border.all(color: Colors.black, width: 0.5.px),
                        borderRadius: BorderRadius.all(Radius.circular(5)),
                      ),
                      alignment: Alignment.center,
                      width: 100.px,
                      height: 42.px,
                      child: Text('五分钟'),
                    ),
                  ),
                  SizedBox(width: 30.px),
                  GestureDetector(
                    onTap: () {
                      controller.pictureTimeSetting(3);
                    },
                    child: Container(
                      decoration: BoxDecoration(
                        color: (controller.pictureSetting == 3) ? Colors.green : Colors.white,
                        border: Border.all(color: Colors.black, width: 0.5.px),
                        borderRadius: BorderRadius.all(Radius.circular(5)),
                      ),
                      alignment: Alignment.center,
                      width: 100.px,
                      height: 42.px,
                      child: Text('十分钟'),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 100.px),
              GestureDetector(
                onTap: () {},
                child: Container(
                  color: Colors.green,
                  alignment: Alignment.center,
                  width: 300.px,
                  height: 42.px,
                  child: Text('视频获取频率设置'),
                ),
              ),
              SizedBox(height: 10.px),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  GestureDetector(
                    onTap: () {
                      controller.videoTimeSetting(1);
                    },
                    child: Container(
                      decoration: BoxDecoration(
                        color: (controller.videoSetting == 1) ? Colors.green : Colors.white,
                        border: Border.all(color: Colors.black, width: 0.5.px),
                        borderRadius: BorderRadius.all(Radius.circular(5)),
                      ),
                      alignment: Alignment.center,
                      width: 100.px,
                      height: 42.px,
                      child: Text('五分钟'),
                    ),
                  ),
                  SizedBox(width: 30.px),
                  GestureDetector(
                    onTap: () {
                      controller.videoTimeSetting(2);
                    },
                    child: Container(
                      decoration: BoxDecoration(
                        color: (controller.videoSetting == 2) ? Colors.green : Colors.white,
                        border: Border.all(color: Colors.black, width: 0.5.px),
                        borderRadius: BorderRadius.all(Radius.circular(5)),
                      ),
                      alignment: Alignment.center,
                      width: 100.px,
                      height: 42.px,
                      child: Text('十分钟'),
                    ),
                  ),
                  SizedBox(width: 30.px),
                  GestureDetector(
                    onTap: () {
                      controller.videoTimeSetting(3);
                    },
                    child: Container(
                      decoration: BoxDecoration(
                        color: (controller.videoSetting == 3) ? Colors.green : Colors.white,
                        border: Border.all(color: Colors.black, width: 0.5.px),
                        borderRadius: BorderRadius.all(Radius.circular(5)),
                      ),
                      alignment: Alignment.center,
                      width: 100.px,
                      height: 42.px,
                      child: Text('二十分钟'),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      );
    });
  }
}
